<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../../vue.js"></script>
 </head>
<body>
    <div id="app">
         <!-- 所有vue的插值语法中,如果使用变量,则都是去当前容器所被挂载的vm实例的属性上去寻找 -->
        <h1>{{name}}的基础使用</h1>
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
              /* 
          data可以是一个对象,是Vue 实例的数据对象
          data的数据会在实例对象vm上作为属性存放起来
          data也可以是一个函数,返回一个对象,对象中存放当前实例需要的数据,并且建议是一个函数
            */

            /* 
            为什么组件内的data要书写为一个函数????
            当一个组件被定义，data 必须声明为返回一个初始数据对象的函数
            因为组件可能被用来创建多个实例(组件可能被复用)。
            如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！则数据就会互相影响
            通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
        
            */
            data(){
                return{
                    project:"VUE",
                    name: "youyuxi",
                    age:"2013"
                }
            }
        })
        console.log(vm);
        //为什么data不能写成函数?
      /* //假设这里有一个page组件的数据,组件要被A和B复用
      const page = {
        currentPage: 0,
        total: 0,
      };

      //A使用了page组件,A就拿到的page的数据
      A = page;
      A.currentPage = 1;
      A.total = 10;
      //B使用了page组件,B就拿到的page的数据
      B = page;
      B.currentPage = 2;
      B.total = 5;

      //因为对象的赋值是地址的赋值,所以A和B和Page共享一个对象,任意修改某一个则会影响其他
      console.log(A);
      console.log(B);

      A.currentPage = 3; */

      //为什么data写成函数?
      /* //初始page数据,把数据定义成一个函数
      const page = function () {
        return {
          currentPage: 0,
          total: 0,
        };
      };

      //A使用了page组件,A就拿到的page的数据
      A = page();
      A.currentPage = 1;
      A.total = 10;

      //B使用了page组件,B就拿到的page的数据
      B = page();
      B.currentPage = 3;
      B.total = 5;

      console.log(A === B); //false
      console.log(A);
      console.log(B); */
    </script>
</body>
</html>